<script setup>
import {reactive,ref} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route.matched[0].children[0].children);
const list = route.matched[0].children[0].children.filter(i => i.meta.isShow)
 let ids = ref(1)
 const switchs = (id,address) => {
  ids.value = id
  router.push({path:address})
 }
</script>
<template>
  <div class="nav">
    <ul class="ww">
      <li v-for="item in list" :key="item.meta.id" @click="switchs(item.meta.id,item.path)">
        <a href="javascript:;" :class="ids === item.meta.id ? 'hot' : ''">{{item.meta.name}}</a>
      </li>
    </ul>
  </div>
  <div class="main">
    <router-view></router-view>
  </div>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.ww {
  width: 1100px;
  margin: auto;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
 
}
.nav {
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    ul {
      margin-left: 428px;
      li {
        display: inline-block;
        height: 35px;
        a {
          display: inline-block;
          height: 20px;
          padding: 0 13px;
          margin: 7px 17px 0;
          border-radius: 20px;
          line-height: 19px;
          color: #fff;
          font-size: 12px;
          &:hover {
            background: #9B0909;
          }
        }
        .hot {
          background: #9B0909;
        }
      }
    }
}
</style>